<template>
	<!-- 循环 -->
	<view class="circulate" v-if="Data[0].count">
		<!-- 选择题循环 -->
		<view class="questionSelect">
			<!-- 输入一、选择题 -->
			<view class="boxType">
				{{dataType[0]}}
			</view>
			<view style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[0].count" :key="count.id">
					<!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
					<!-- 如果状态为1，显示红色按钮-->
					<button v-bind:class="[Data[0].status[count-1]===0?'buttonRight':'buttonError']" class="button-span"
						type="default" @click="check(count-1)">
						{{count}}
					</button>
				</view>
			</view>
		</view>
		<!-- 判断题循环 -->
		<view class="questionFill" v-if="Data[1].count">
			<!-- 输入二、判断题 -->
			<view class="boxType">
				{{dataType[1]}}
			</view>
			<view style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[1].count" :key="count.id">
					<!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
					<!-- 如果状态为1，显示红色按钮-->
					<button class="button-span" v-bind:class="[Data[1].status[count-1]===0?'buttonRight':'buttonError']"
						type="default" @click="check(count+Data[0].count-1)">
						{{count+Data[0].count}}
					</button>
				</view>
			</view>
		</view>
		<!-- 填空题循环 -->
		<view class="questionFill" v-if="Data[2].count">
			<!-- 输入三、填空题 -->
			<view class="boxType">
				{{dataType[2]}}
			</view>
			<view style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[2].count" :key="count.id">
					<!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
					<!-- 如果状态为1，显示红色按钮-->
					<button class="button-span" v-bind:class="[Data[2].status[count-1]===0?'buttonRight':'buttonError']"
						type="default" @click="check(count+Data[0].count+Data[1].count-1)">
						{{count+Data[0].count+Data[1].count}}
					</button>
				</view>
			</view>
		</view>
		<!-- 简答题题循环 -->
		<view class="questionAnswer" v-if="Data[3].count">
			<!-- 输入四、简答题 -->
			<view class="boxType">
				{{dataType[3]}}
			</view>
			<view style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[3].count" :key="count.id">
					<!-- 通过传来的题目状态选择样式（class），如果状态为0，表示写对，显示绿色按钮 -->
					<!-- 如果状态为1，显示红色按钮-->
					<button class="button-span" v-bind:class="[Data[3].status[count-1]===0?'buttonRight':'buttonError']"
						type="default" @click="check(count+Data[0].count+Data[1].count+Data[2].count-1)">
						{{count+Data[0].count+Data[1].count+Data[2].count}}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPaperMsg
	} from '../../api/file.js'
	export default {
		//emits:['pageChange'],
		data() {
			return {
				token:uni.getStorageSync('token'),
				paperId:uni.getStorageSync('paperId'),
				dataType: [], //数据类型
				questionPaper: {
					sumScore: 0
				},
				Data: [ //status存储问题是否写对的状态
					{
						count: 0,
						status: []
					},
					{
						count: 0,
						status: []
					},
					{
						count: 0,
						status: []
					},
					{
						count: 0,
						status: []
					}
				],
				questionMsg: [],
			}
		},
		created() {
			this.getQuestions()
			this.getPaper();
		},

		methods: {
			getPaper() {
				console.log('试卷id',this.paperId);
				getPaperMsg({
					testId: uni.getStorageSync("testCode"),
					paperId:uni.getStorageSync('paperId'),
					studentNum: uni.getStorageSync("studentNum")
				}).then(res => {
					var dataType = []
					var questionMsgTemp = res.data.data.questionMsg;
					console.log("hahahyy",questionMsgTemp);
					for (var i = 0; i < this.$store.state.questions.length; i++) {
						dataType.push(this.$store.state.questions[i].type);
					}
					dataType = Array.from(new Set(dataType));
					//通过循环调整questionMsg的题目顺序
					for (var x of dataType) {
						for (var y of questionMsgTemp) {
							if (x == y.type) {
								this.questionMsg.push(y);
							}
						}
					}
					this.$store.state.questionMsg = this.questionMsg
					this.getMsg();
					//console.log("Data:", this.Data);
					this.getScore();
				})
			},
			//通过接口获取题目信息
			getQuestions() {
			  this.$store.dispatch("getQuestions",{paperId:this.paperId,token:this.token});
			},
			getScore() {
				for (var i = 0; i < this.questionMsg.length; i++) { //算总分
					this.questionPaper.sumScore += Number(this.questionMsg[i].score);
				}
				// 向父组件传值
				this.$emit('getChild', this.questionPaper.sumScore);
			},
			//初始化Data的信息
			getMsg() {
				this.questions = this.$store.state.questions;
				for (var i = 0; i < this.questions.length; i++) {
					this.dataType.push(this.questions[i].type);
				}
				this.dataType = Array.from(new Set(this.dataType));
				// console.log("去重dataType", this.dataType);
				// console.log("getMsg.questions", this.questions);
				if (this.Data[0].count === 0 && this.Data[2].count === 0 && this.Data[1].count === 0 && this.Data[3]
					.count === 0) {
					for (var i = 0; i < this.questionMsg.length; i++) {
						for (var j = 0; j < this.dataType.length; j++) {
							if (this.questionMsg[i].type === this.dataType[j]) {
								this.Data[j].count++;
								if (this.questionMsg[i].score === this.$store.state.questions[i].score) //根据questuion中score更新status的值
									this.Data[j].status.push(0);
								else
									this.Data[j].status.push(1);
							}
						}
					}
				}

			},
			check(cnt) {
				//console.log("cnt:", cnt);
				uni.navigateTo({
					url: "recordDetail?id=" + cnt
				})
			}
		}
	}
</script>

<style>
	.boxType {
		margin: 12rpx;
		font-size: 36rpx;
	}

	.buttonRight {
		border-radius: 30rpx;
		height: 60rpx;
		width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #2ECC71;
		color: #F8F8F8;
		padding: 0;
	}

	.buttonError {
		border-radius: 30rpx;
		height: 60rpx;
		width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #F04844;
		color: #F8F8F8;
		padding: 0;
	}

	.buttonFinished {
		border-radius: 30rpx;
		height: 60rpx;
		width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #3498DB;
		color: #F8F8F8;
		padding: 0;
	}

	/* .questionSelect{
		margin-top: 30rpx;
	} */
	.questionFill {
		margin-top: 30rpx;
	}

	.questionAnswer {
		margin-top: 30rpx;
	}

	.questionComprehensive {
		margin-top: 30rpx;
	}
</style>
